<template>
  <div class="main-container">
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside width="220px" class="sidebar">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#34495e"
          text-color="#fff"
          class="el-menu-vertical"
          :default-active="$route.name" 
          @select="handleMenuSelect"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>小区概况</span>
            </template>
            <el-menu-item index="baseinfo">基本信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><user /></el-icon>
              <span>广场动态</span>
            </template>
            <el-menu-item index="square">动态交流</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><money /></el-icon>
              <span>闲置物品</span>
            </template>
            <el-menu-item index="goods">服务中心</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title> 
              <el-icon><money /></el-icon>
              <span>水电泥油木</span>
            </template>
            <el-menu-item index="housekeeping">日常维修</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><tools /></el-icon>
              <span>家政清洁</span>
            </template>
            <el-menu-item index="clean">家政服务</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><user /></el-icon>
              <span>托管服务</span>
            </template>
            <el-menu-item index="loveChild">托管管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <router-view v-if="$route.meta.showContent" />
        <div v-else class="empty-content">
          <el-empty description="请从左侧菜单选择功能" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {
  Location,
  User,
  Money,
  Tools
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleMenuSelect = (name) => {
  router.push({ name })
}
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* 减去header高度 */
}

.sidebar {
  background-color: #34495e;
  height: 100%;
}

.el-menu-vertical {
  border-right: none;
  height: 100%;
}

.main-content {
  padding: 0;
  background-color: #f5f7fa;
  position: relative;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 确保页脚与侧边栏相连 */
:deep(.el-container) {
  flex: 1;
  min-height: 0; /* 解决flex布局中的高度问题 */
}
</style>